<template>
  <div class="autograph">
    <div id="container" class="bianqian1">
      <div v-for="(item, index) in listTitle" id="index" :key="index" @click="choose(item)">
        <!-- <img :src="ids === item.index ? item.url1 : item.url" /> -->
        <p>{{ $t(item.name) }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "Heager",
  data() {
    return {
      open: false,
      screenWidth: "",
      screenHeight: "",
      value: "",
      ids: 9,
      listTitle: [
        {
          index: 0,
          name: "navbar.home",
          path: "/home",
          url: require("@/assets/01.png"),
          url1: require("@/assets/10.png"),
        },
        {
          index: 1,
          name: "navbar.s2",
          path: "/storage",
          url: require("@/assets/02.png"),
          url1: require("@/assets/11.png"),
        },
        {
          index: 2,
          name: "navbar.s3",
          path: "/advance",
          url: require("@/assets/03.png"),
          url1: require("@/assets/12.png"),
        },
        {
          index: 3,
          name: "navbar.s4",
          path: "/distribution",
          url: require("@/assets/04.png"),
          url1: require("@/assets/13.png"),
        },
        {
          index: 4,
          name: "navbar.s5",
          path: "/water",
          url: require("@/assets/05.png"),
          url1: require("@/assets/14.png"),
        },
        {
          index: 5,
          name: "navbar.s8",
          path: "/fire",
          url: require("@/assets/00.png"),
          url1: require("@/assets/18.png"),
        },
        {
          index: 6,
          name: "navbar.s6",
          path: "/police",
          url: require("@/assets/06.png"),
          url1: require("@/assets/16.png"),
        },
        {
          index: 7,
          name: "navbar.s7",
          path: "/adata",
          url: require("@/assets/07.png"),
          url1: require("@/assets/17.png"),
        },
        {
          index: 8,
          name: "navbar.s9",
          path: "set",
          url: require("@/assets/08.png"),
          url1: require("@/assets/15.png"),
        },
      ],
    };
  },
  watch: {
    "$route.path": {
      deep: true,
      handler(a, b) {
        // this.choose({ index: a });
        console.log(a, b);
        this.listTitle.map((item) => {
          if (item.path === a) {
            this.choose(item);
          }
        });
      },
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    window.onresize = () =>
      (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
      })();
    let item = localStorage.getItem("index");

    this.choose(
      JSON.parse(item) || {
        index: 0,
        name: "navbar.home",
        path: "/home",
        url: require("@/assets/01.png"),
        url1: require("@/assets/10.png"),
      }
    );
  },
  methods: {
    ...mapMutations({
      onePlus: "test/onePlus",
      logout: "user/LOGOUT",
    }),
    choose(item) {
      try {
        let id = item.index;
        this.ids = item.index;
        if (localStorage.getItem("indedx")) {
          return;
        } else {
          localStorage.setItem("index", JSON.stringify(item));
        }
        this.$router.push(item.path).catch(() => {});
        this.$store.commit("pageChange", id);
        this.open = false;
        this.breadValue = item.name;
        let spanArr = document
          .getElementById("container")
          .getElementsByTagName("div");
        for (let i = 0; i <= 8; i++) {
          if (id === i) {
            spanArr[id].style.border = "1px solid rgb(255,230,127)";
            spanArr[id].style.color = "rgb(255,230,127)";
            spanArr[i].style.padding = "0";
          } else {
            spanArr[i].style.border = "0";
            spanArr[i].style.color = "#fff";
            spanArr[i].style.padding = "0";
          }
        }
      } catch {
        console.log("导航栏错误错误");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.autograph {
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  .bianqian1 {
    height: 40px;
    // margin-top: 6px;
    text-align: center;
    background-color: rgb(81, 97, 120);
    font-size: 12px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    div {
      width: 70px;
      height: 40px;
      background-color: rgb(81, 97, 120);
      border-radius: 10px;
    }
  }
}
</style>
